<script setup lang='ts'>
import { reactive, ref } from 'vue';

import {
    DeleteShop,
    getAddShop,
    getCustomerlists,
    getEdit,
    getPointsMall,
    getShopId
} from '@/api/pointManagement/pointMangement';
import { ElMessage, ElMessageBox, FormInstance, UploadProps } from 'element-plus';
import { getToken } from '@/utils/auth';
interface tableDataType {
    goodsName:string,
    goodsIntroduce:string,
    // 兑换积分
    goodsIntegral:0,
    // 可兑换次数
    goodsExchangeFrequency:0,
    // 剩余数量
    goodsMargin:0,
    goodsSort:0,
    goodsState:0,
    goodsValue:0,
    goodsNumber:0,
    goodsId:0,
    content:''
}
const tableData = ref<tableDataType[]>([
    // {
    //     content: '<p style="color: red;">这是一段富文本内容</p>'
    // },
]);
const dialogFormVisible = ref(false);
const nameValidateForm = reactive({
    goodsName:'',
    goodsIntroduce:'',
    // 兑换积分
    goodsIntegral:'',
    // 可兑换次数
    goodsExchangeFrequency:'',
    // 剩余数量
    goodsMargin:'',
    goodsSort:'',
    goodsState:'',
    goodsValue:'',
    goodsNumber:0,
    goodsId:0,

});
const imageUrlPc = ref('');
const imageUrl = ref('');
function handleClick(edit) {
    console.log(edit);
    nameValidateForm.goodsName = edit.row.goodsName;
    nameValidateForm.goodsIntroduce = edit.row.goodsIntroduce;
    nameValidateForm.goodsExchangeFrequency= edit.row.goodsExchangeFrequency;
    nameValidateForm.goodsMargin = edit.row.goodsMargin;
    nameValidateForm.goodsSort= edit.row.goodsSort;
    nameValidateForm.goodsState = edit.row.goodsState;
    nameValidateForm.goodsValue = edit.row.goodsValue;
    nameValidateForm.goodsNumber = edit.row.goodsNumber;
    nameValidateForm.goodsIntegral= edit.row.goodsIntegral;
    imageUrlPc.value = edit.row.goodsImage;
    nameValidateForm.goodsId = edit.row.goodsId;

}
//渲染
getPointsMall().then(res => {
    console.log(res);
    (res as any).rows.map((item: any) => {
        tableData.value.push(item);


    });
    console.log(tableData.value);
});
const handleAvatarSuccessPc: UploadProps['onSuccess'] = (
    response
) => {
    imageUrlPc.value = response.fileName;
};
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!');
        return false;
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!');
        return false;
    }
    return true;
};
let headers = reactive({ 'Authorization': 'Bearer ' + getToken() });

const formRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response
) => {
    imageUrl.value = response.fileName;
};
const handleChange = (value: number) => {
    console.log(value);
}
const value = ref('');
const options = [
    { value: 'Option1', label: '冀商活动', },
    { value: 'Option2', label: '冀商好物', }
];

//编辑
let  editData = ref({
    goodsName:'',
    goodsIntroduce:'',
    // 兑换积分
    goodsIntegral:'',
    // 可兑换次数
    goodsExchangeFrequency:'',
    // 剩余数量
    goodsMargin:'',
    goodsSort:'',
    goodsState:'',
    goodsValue:'',
    goodsNumber:0,
    goodsImage:'',
    goodsId:0,
});
const submitForm1 = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            getEdit( editData.value).then(res =>{
                console.log(res);
            });
            dialogFormVisible.value=false;
            ElMessage.success('提交成功');
            console.log('submit!');
        } else {
            console.log('error submit!');
            return false;
        }
    });
}
let introduce1 = ref()
function changeEnter(){
    editData.value.goodsName = nameValidateForm.goodsName;
    editData.value.goodsIntroduce =  introduce1.value;
    editData.value.goodsIntegral = nameValidateForm.goodsIntegral;
    editData.value.goodsExchangeFrequency = nameValidateForm.goodsExchangeFrequency;
    editData.value.goodsMargin = nameValidateForm.goodsMargin;
    editData.value.goodsSort = nameValidateForm.goodsSort;
    editData.value.goodsState = nameValidateForm.goodsState;
    editData.value.goodsValue = nameValidateForm.goodsValue;
    editData.value.goodsNumber = nameValidateForm.goodsNumber;
    editData.value.goodsImage = imageUrlPc.value;
    editData.value.goodsId = nameValidateForm.goodsId;
    // (formRef as any).value.validate((valid) => {
    //     if (valid) {
    //         // changeDataFn(changeformData.value).then(() => {
    //         //     ElMessage.success('提交成功');
    //         //     pageData.value.length = 0;
    //         //     getPageData(searchData.value).then((res) => {
    //         //         pageData.value?.push((res as any).rows);
    //         //         pageDatatotal.value = (res as any).total;
    //         //     });
    //         //     changeDialog.value = false;
    //         // });
    //
    //     } else {
    //         ElMessage.error('提交失败');
    //         return false;
    //     }
    // });
    // getEdit( editData.value).then(res =>{
    //     console.log(res);
    // });
    console.log(editData.value);

}

//新增
const dialogFormVisible1 = ref(false);
const introduce = ref();
let  addData= ref({
    goodsName:'',
    goodsIntroduce:'',
    // 兑换积分
    goodsIntegral:'',
    // 可兑换次数
    goodsExchangeFrequency:'',
    // 剩余数量
    goodsMargin:'',
    goodsSort:'',
    goodsState:'',
    goodsValue:'',
    goodsNumber:0,
    goodsImage:'',
    goodsId:0,
});
function addUser(){
    console.log('');
}
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            dialogFormVisible1.value = false;
            getAddShop(addData.value).then(res =>{
                console.log(res);
                ElMessage.success('提交成功');
                // console.log('submit!');
            });

            setTimeout(function(){
                resetShopId();
            },100);
        } else {
            console.log('error submit!');
            return false;
        }
    });
}
function addEnter(){
    addData.value.goodsName = nameValidateForm.goodsName;
    addData.value.goodsIntroduce = introduce.value;
    addData.value.goodsIntegral = nameValidateForm.goodsIntegral;
    addData.value.goodsExchangeFrequency = nameValidateForm.goodsExchangeFrequency;
    addData.value.goodsMargin = nameValidateForm.goodsMargin;
    addData.value.goodsSort = nameValidateForm.goodsSort;
    addData.value.goodsState = nameValidateForm.goodsState;
    addData.value.goodsValue = nameValidateForm.goodsValue;
    addData.value.goodsNumber = nameValidateForm.goodsNumber;
    addData.value.goodsImage = imageUrlPc.value;
    // getAddShop(addData.value).then(res =>{
    //     console.log(res);
    // });
}


//删除
let  deleteData = ref();
function deleteShop(tableDataEdit){
    deleteData.value = tableDataEdit.row.goodsId;
    console.log(tableDataEdit);

}
const open = (deleteShop) => {
    ElMessageBox.confirm(
        '此操作将会永久删除该数据，是否继续?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            DeleteShop(deleteShop);
            setTimeout(function(){
                resetShopId();
            },100);
            ElMessage({
                type: 'success',
                message: '删除成功',
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            });
        });
};


//搜索
const input = ref('');
import { Search } from '@element-plus/icons-vue';
import router from '@/router';
function searchShopId(){
    console.log(input.value);
    getShopId(input.value).then(res =>{
        console.log(res);
        tableData.value.length = 0;
        (res as any).rows.map((item: any) => {

            tableData.value.push(item);
        });
    });

}
//重置
function resetShopId(){
    tableData.value.length = 0;
    getPointsMall().then(res => {
        console.log(res);
        (res as any).rows.map((item: any) => {
            tableData.value.push(item);
        });
        console.log(tableData.value);
    });

}


//兑换记录
function jumpUserEquity(id){
    router.push({path: 'records', query: {articleGroupId: id}});

}
// const tableData = ref([
//     {
//         // ...其他数据
//         content: '<p style="color: red;">这是一段富文本内容</p>'
//     },
//     // ...更多数据
// ]);
</script>

<template>
<div>
    <div style='margin: 20px;'>商品名称 <el-input v-model="input" style="width: 240px" placeholder="请输入" />
        <el-button @click='searchShopId' type="primary" :icon="Search" style='margin-left: 20px'>搜索</el-button>
        <el-button @click='resetShopId' type="primary" style='width: 80px'>重置</el-button>

    </div>
    <el-button  type='primary' style='margin: 20px' @click='addUser ;dialogFormVisible1 = true' >+新增</el-button>
    <el-button  @click="jumpUserEquity"  style='margin-left: 10px' type="primary">兑换记录</el-button>
    <!--        表单-->
    <el-table :data='tableData' style='width: 90%;margin: auto;text-align: center'>
        <el-table-column fixed prop='goodsName' label='商品名称' width='' />
<!--        <el-table-column fixed prop='goodsIntroduce' label='商品介绍' width='' />-->
        <el-table-column prop="goodsIntroduce" label="商品介绍">
            <template #default="{ row }">
                <div v-html="row.goodsIntroduce"></div>
            </template>
        </el-table-column>
        <el-table-column fixed prop='goodsIntegral' label='兑换积分' width='' />
        <el-table-column fixed prop='goodsExchangeFrequency' label='可兑换次数' width='' />
        <el-table-column fixed prop='goodsMargin' label='剩余数量' width='' />
        <el-table-column fixed prop='goodsSort' label='排序' width='' />
        <el-table-column fixed prop='goodsState' label='状态' width='' />
        <el-table-column fixed='right' label='操作' width='120'>
            <template #default=tableDataEdit>
                <el-button link type='primary' size='small'
                           @click='handleClick(tableDataEdit);dialogFormVisible = true'>
                    编辑
                </el-button>
                <el-button @click="  open(tableDataEdit.row.goodsId) ;" link type='primary' size='small' >
                    删除
                </el-button>

            </template>
        </el-table-column>
    </el-table>
<!--    编辑-->
    <el-dialog   v-model='dialogFormVisible'  title='编辑' width='700'>
        <el-form
            ref='formRef'
            style='max-width: 600px'
            :model='nameValidateForm'
            label-width='auto'
            class='demo-ruleForm'
        >
            <el-form-item
                label='商品名称'
                prop='goodsName'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model.string='nameValidateForm.goodsName'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='副标题'
                prop='goodsName'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model.string='nameValidateForm.goodsName'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='兑换需要积分'
                prop='goodsIntegral'
                :rules="[
        { required: true, message: '请输入积分' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsIntegral" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsIntegral"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
<!--            商品分类-->
            <el-form-item
                label='商品分类'
                prop='goodsIntegral'
                :rules="[
        { required: true, message: '请输入分类' },
        { type: 'number', message: '请输入数字' },
                 ]">
                <div class="flex flex-wrap gap-4 items-center">
                <el-select
                    v-model="value"
                    placeholder="请选择"
                    size="large"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                </div>
            </el-form-item>
<!--            -->
            <el-form-item
                label='商品数量'
                prop='goodsNumber'
                :rules="[
        { required: true, message: '请输入数量' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsNumber" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsNumber"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='商品价格'
                prop='goodsValue'
                :rules="[
        { required: true, message: '请输入价格' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsValue" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsValue"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
<!--            图片-->
            <el-form-item
                label='商品图片'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccessPc'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='可兑换次数'
                prop='goodsValue'
                :rules="[
        { required: true, message: '请输入积分' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsExchangeFrequency" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsExchangeFrequency"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='排序'
                prop='goodsSort'
                :rules="[
        { required: true, message: '请输入排序' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsSort" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsSort"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='状态'
                prop='goodsSort'
                :rules="[
        { required: true, message: '请输入状态' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsState" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsState"
                    :min="0"
                    :max="1"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>

            <p style='margin-left: 50px'>富文本</p>
            <el-form-item style='margin-left: 80px ;width: 520px'>

                <editor v-model='introduce1'/>
            </el-form-item>
            <el-form-item style='width: 200px;margin-left: 500px'>
                <el-button type='primary' @click='changeEnter();submitForm1(formRef); '>确认</el-button>
                <el-button @click='resetForm(formRef);dialogFormVisible=false'>取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>
<!--    新增-->
    <el-dialog v-model='dialogFormVisible1' title='新增' width='700'>
        <el-form

            ref='formRef'
            style='max-width: 600px'
            :model='nameValidateForm'
            label-width='auto'
            class='demo-ruleForm'
        >
            <el-form-item
                label='商品名称'
                prop='goodsName'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model='nameValidateForm.goodsName'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='副标题'
                prop='goodsName'
                :rules="[
        { required: true, message: '请输入名称' },
        { type: 'string', message: '请输入' },
                 ]">
                <el-input
                    v-model='nameValidateForm.goodsName'
                    type='text'
                    autocomplete='off'
                />
            </el-form-item>
            <el-form-item
                label='兑换需要积分'
                prop='goodsIntegral'
                :rules="[
        { required: true, message: '请输入积分' ,trigger: 'blur'},
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsIntegral" :min="1" :max="1000" @change="handleChange" size='large' />-->
                <el-input-number
                    v-model="nameValidateForm.goodsIntegral"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <!--            商品分类-->
            <el-form-item
                label='商品分类'
                prop='goodsIntegral'
                :rules="[
        { required: true, message: '请选择分类' ,trigger: 'change'},
        { type: 'number', message: '请输入数字' },
                 ]">
                <div class="flex flex-wrap gap-4 items-center">
                    <el-select
                        v-model="value"
                        placeholder="请选择"
                        size="large"
                        style="width: 240px"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </el-form-item>
            <!--            -->
            <el-form-item
                label='商品数量'
                prop='goodsNumber'
                :rules="[
        { required: true, message: '请输入积分' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsNumber" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsNumber"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='商品价格'
                prop='goodsValue'
                :rules="[
        { required: true, message: '请输入价格' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsValue" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsValue"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <!--            图片-->
            <el-form-item
                label='商品图片'
                prop='mien'
                :rules="[
        { required: false, message: '请上传图像' },
        { type: 'string', message: '请输入' },
                 ]"
            >
                <el-upload
                    class='avatar-uploader'
                    action='/dev-api/common/upload'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccessPc'
                    :before-upload='beforeAvatarUpload'
                    :headers='headers'
                >
                    <img v-if='imageUrlPc' :src='"/dev-api"+ imageUrlPc' class='avatar'
                         style='width: 200px;height: 200px' />
                    <el-icon v-else class='avatar-uploader-icon'>

                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item
                label='可兑换次数'
                prop='goodsValue'
                :rules="[
        { required: true, message: '请输入积分' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsExchangeFrequency" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsExchangeFrequency"
                    :min="1"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='排序'
                prop='goodsSort'
                :rules="[
        { required: true, message: '请输入排序' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsSort" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsSort"
                    :min="0"
                    :max="10000"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>
            <el-form-item
                label='状态'
                prop='goodsSort'
                :rules="[
        { required: true, message: '请输入积分' },
        { type: 'number', message: '请输入数字' },
                 ]">
<!--                <el-input-number v-model="nameValidateForm.goodsState" :min="1" :max="1000" @change="handleChange" />-->
                <el-input-number
                    v-model="nameValidateForm.goodsState"
                    :min="0"
                    :max="1"
                    controls-position="right"
                    size="default"
                    @change="handleChange"
                />
            </el-form-item>

            <p style='margin-left: 50px'>富文本</p>
            <el-form-item style='margin-left: 80px ;width: 520px'>
                <editor v-model='introduce'/>
            </el-form-item>
            <el-form-item style='width: 200px;margin-left: 500px'>
                <el-button type='primary' @click='addEnter();submitForm(formRef); '>确认</el-button>
                <el-button @click='resetForm(formRef);dialogFormVisible1=false'>取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>
</div>
</template>

<style scoped>
img{
    display: inline-block;
}

/deep/ .cell {
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
